<template>
    <a class="option">
        <div class="info-box child">
            <img :src="img" class="img">
            <span class="option-name">{{optName}}</span>
            <span v-show="isSeted" class="text seted-text">{{setedLeftText}}</span>
            <span v-show="!isSeted && noSetLeftText" class="text danger">{{noSetLeftText}}</span>
        </div>
        <div class="thumb child">
            <span class="text" :class="setedClass" v-show="isSeted">{{setedRightText}}</span>
            <span v-show="!isSeted" class="text danger">{{noSetRightText}}</span>
            <van-icon name="arrow" class="icon" />
        </div>
    </a>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'

Vue.use(Icon)

export default {
    name: 'SafeOption',
    props: {
        img: {
            type: String,
            default: '',
        },
        optName: {
            type: String,
            default: '',
        },
        setedLeftText: {
            type: String,
            default: '增加',
        },
        setedRightText: {
            type: String,
            default: '',
        },
        noSetRightText: {
            type: String,
            default: '未关注',
        },
        noSetLeftText: {
            type: String,
            default: '',
        },
        isSeted: {
            type: Number,
            default: 0,
        },
        setedClass: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        clickOpt() {

        }
    },
    computed: {

    },
}
</script>

<style lang="scss" scoped>
.option {
    display: flex;
    color: #666666;
    height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;
    clear: both;
    align-items: center;
    background: white;

    .danger {
        color: red;
    }

    .child {
        display: flex;
        height: 100%;
        align-items: center;
    }

    .info-box {
        width: 100%;

        .text {
            margin-left: 4px;
        }

        .img {
            width: 25px;
            height: 25px;
            margin-right: 10px;
        }

        .seted-text {
            color: #999999;
            font-size: 12px;
        }
    }

    .thumb {
        flex-shrink: 0;

        .default-color {
            color: #0077bf;
        }

        .color-999 {
            color: #999999;
        }

        .icon {
            font-size: 16px;
            font-weight: bold;
        }

        .text {
            margin-right: 4px;
        }
    }
}
</style>